﻿@page "/docs/extensions/transferlist"

<Seo Canonical="/docs/extensions/transferlist" Title="Blazorise Transfer List component" Description="Learn to use and work with the Blazorise Transfer List component, a component for transferring items between two lists in Blazor applications." />

<DocsPageTitle Path="Extensions/TransferList" AddedVersion="Added in v1.4">
    Blazorise Transfer List component
</DocsPageTitle>

<DocsPageLead>
    The <Code>TransferList</Code> component is a versatile control element in Blazor that facilitates transferring items between two lists within applications.
</DocsPageLead>

<DocsPageParagraph>
    Transfer List components provide an intuitive way to move items between two lists. These components enhance the user experience and streamline tasks that involve item organization and categorization.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Multiple Selection Mode">
        In the multiple selection mode, users can transfer multiple items between two lists.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TransferListMultipleSelectionExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TransferListMultipleSelectionExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Single Selection Mode">
        In the single selection mode, users can transfer one item at a time between two lists.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TransferListSingleSelectionExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TransferListSingleSelectionExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Move All">
        You can enable the <Code>ShowMoveAll</Code> parameter to display the <Code>Move All</Code> buttons. These buttons allow users to move all items to the opposite list.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TransferListShowAllExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TransferListShowAllExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Bind Lists">
        You can bind to both lists. The <Code>ItemsStart</Code> and <Code>ItemsEnd</Code> parameters track the items in the first and second lists, respectively.
        You may also provide the starting items for each list. If the opposite list is empty, the list will be populated with the remaining items.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TransferListListsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TransferListListsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Scrollable">
        If you have a large number of items, you can enable the <Code>Scrollable</Code> parameter to add a vertical scrollbar to the Transfer List. And control the maximum height by using the <Code>MaxHeight</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TransferListScrollableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TransferListScrollableExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Can Move">
        You may customize which of the items are able to be moved by utilizing the <Code>CanMoveToStart</Code> and <Code>CanMoveToEnd</Code> parameters.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TransferListCanMoveExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TransferListCanMoveExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Customize">
        You may customize the look of each of the transfer list by utilizing the <Code>ItemStartTemplate</Code> and <Code>ItemEndTemplate</Code> parameters.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TransferListCustomItemTemplatesExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TransferListCustomItemTemplatesExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(TransferList<> )]" />